import React from "react"
import { Card } from 'antd';
const DJS = {
    count: 0,
    subscribe(callback) {
        setInterval(() => {
            this.count++
            console.log()
            return callback(this.count)
        }, 1000)
    }
}


class Advanced01 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        }

    }
    componentDidMount() {
        // 1种方法
        this._isMount = true
        // 1种方法
        console.log()
        DJS.subscribe(currentCount => {
            // if (this._isMount) { // 1种方法
            this.setState({
                count: currentCount
            })
            // } // 1种方法
        })
    }
    componentWillUnmount = () => {
        // 1种方法
        this._isMount = true
        // 1种方法

        //2种方法
        //卸载了 就不 进行 setState
        this.setState = (state, callback) => {
            return;
        };
        //2种方法
    }
    render() {
        return (
            <Card title="切换页面时 要停掉所有异步请求" bordered={false}>
                <h4> 原因：组件在卸载之后(比如你切换路由卸载一些组件)依然去更新了state。（setState） </h4>
                <p>两种情况：</p>
                <p>设置了定时器setinterval 或者递归setTimeout。 组件在之前没有清除掉。</p>
                <p>网络请求 异步回来数据</p>
                <br />
                <h2>倒数计时数===={this.state.count}</h2>
            </Card>
        )
    }
}
export default Advanced01